<template>
	<view style="padding-bottom: 55px;" >
		<!-- 轮播图 -->
		<view>
			<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000" :circular="true"
				class="swiper-box">
				<swiper-item v-for="(item,index) in goodInfo.pics" :key="index">
					<image :src="item.pics_big" style="height: 100%;width: 100%;" @click="preview(index)"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 详情 -->
		<view style="display: flex;flex-direction: column;padding: 20rpx 20rpx;" v-if="goodInfo.goods_name">
			<text style="font-size: 22px;color: red;">￥{{goodInfo.goods_price}}</text>
			<view style="display: flex;padding: 20rpx 0;">
				<text>{{goodInfo.goods_name}}</text>
				<view
					style="padding: 0 50rpx;font-size: 12px;display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<uni-icons type="star" size="30"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<view>
				<text style="font-size: 13px;color: rgba(0, 0, 0, 0.5);">快递: 免运费</text>
			</view>
		</view>
		<!-- 图片介绍 -->
		<rich-text :nodes="goodInfo.goods_introduce"></rich-text>
		<!-- 购物车导航 -->
		<view class="shop-nav">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				goodInfo: [],
				options: [{
					icon: 'shop',
					text: '店铺',
					// info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
			}
		},
		methods: {
			// 请求数据
			async getGoodInfo(goods_id) {
				const {
					data: res
				} = await uni.$http.get("/goods/detail", {
					goods_id
				})
				if (res.meta.status !== 200) return uni.$showMsg()
				res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g,
					'<img style="display:block;" ')
				this.goodInfo = res.message
			},
			preview(i) {
				uni.previewImage({
					current: i,
					urls: this.goodInfo.pics.map(item => item.pics_big)
				})
			},
			onClick(e) {
				if (e.content.text === "购物车") {
					uni.switchTab({
						url: '../../pages/cart/cart'
					})
				}
			},
			...mapMutations('m_cart', ['addToCart']),
			buttonClick(e) {
				if (e.content.text === "加入购物车") {
					// console.log(this.goodInfo);
					const goods = {
						goods_id: this.goodInfo.goods_id, // 商品的Id
						goods_name: this.goodInfo.goods_name, // 商品的名称
						goods_price: this.goodInfo.goods_price, // 商品的价格
						goods_count: 1, // 商品的数量
						goods_small_logo: this.goodInfo.goods_small_logo, // 商品的图片
						goods_state: true

					}
					this.addToCart(goods)
				}
			}

		},
		onLoad(option) {
			let goods_id = option.goods_id
			this.getGoodInfo(goods_id)
		},
		computed:{
			...mapGetters('m_cart',['total'])
		},
		watch:{
			total:{
				handler(newValue){
					const findRsult=this.options.find(item=>item.text==='购物车')
					if(findRsult){
						findRsult.info=newValue
					}
				},
				immediate:true
			}
			
		}
	}
</script>

<style scoped>
	.swiper-box {
		height: 600rpx;
		width: 100%;
	}

	.shop-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
</style>
